<template>
	<view class="main">
		<view v-for="item in allState.list" :key="item.userid" class="flex flex-ai-c list" @click="skip(item)">
			<view class="head-img">
				<image :src="item.headimg || '../../static/img/headimg.jpg'"></image>
			</view>
			<view class="right flex flex-ai-c f1">
				<view>
					<view>{{item.username}}</view>
					<view>{{item.sign}}</view>
					<view></view>
				</view>
				<view class="gz" v-if="allState.id == allState.userinfo.userid" @click.stop="cancel(item)">{{item.text}}</view>
			</view>
		</view>
		<view style="height: 100%;" v-if="!allState.list.length">
			<u-empty text="数据为空" mode="list"></u-empty>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {reactive} from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import user from '@/api/user.js'
	import chat from '@/api/chat.js'
	let allState = reactive({
		list: [],
		id: null,
		userinfo: uni.getStorageSync('userinfo')
	})
	const cancel = async (item:AnyObject) => {
		if(item.text == '取消关注'){
			const res = await chat.followCancel({
				id: item.fid,
			})
			item.text = '关注'
		}
		getList(allState.id)
	}
	const skip = (item: any) => {
		uni.navigateTo({
			url: `/pages_home/personalInfo/index?id=${item.userid}`
		})
	}
	const getList = async (id: number|string) =>{
		const res = await user.getUserList({
			type: 1,
			userid: id
		})
		res.data.map(v => {
			v.text = '取消关注'
		})
		allState.list  = res.data
	}
	onLoad((op)=>{
		let id = op.id ? op.id : allState.userinfo.userid
		
		allState.id = id
		getList(id)
	})
</script>

<style lang="scss" scoped>
	page{
		height: 100%;
	}
	.main{
		height: 100%;
		.list{
			padding: 20rpx;
			border-bottom: 1px solid gainsboro;
		}
		.right{
			margin-left: 20rpx;
		}
		.gz{
			text-align: center;
			width: 140rpx;
			line-height: 50rpx;
			color: rgb(247,119,14);
			height: 50rpx;
			border: 1px solid rgb(247,119,14);
			border-radius: 30rpx;
			position: absolute;
			right: 20rpx;
		}
	}
</style>